<template>
  <header-option>
    <template v-slot:btn>
      <div>
        <cs-btn type="primary" btnText="添加" @click.native="addSiteDialogVisible" />
        <cs-btn btnText="删除" @click.native="deleteBtnClick" />
        <cs-btn btnText="导出" @click.native="exportlist" />
        <cs-btn btnText="导入" v-show="false" />
      </div>
    </template>
    <template v-slot:input>
      <cs-label labelText="站点名称" width="241">
        <el-input class="cs-input" v-model.trim="headerData.siteName" clearable></el-input>
      </cs-label>
      <cs-label labelText="站点编号" width="241">
        <el-input class="cs-input" v-model.trim="headerData.siteNumber" clearable></el-input>
      </cs-label>
      <cs-label labelText="站点类型" width="241" v-if="false">
        <el-select
          v-model="headerData.siteTypeValue"
          clearable
          placeholder="请选择"
          class="cs_select"
        >
          <el-option
            v-for="item in headerData.siteType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </cs-label>
      <cs-btn type="search" btnText="查询" class="searcg_btn" @click.native="searchBtnClick" />
    </template>
  </header-option>
</template>

<script>
import _ from 'lodash'

import headerOption from '@/components/headerOption/headerOption.vue'
import csBtn from '@/components/cs-btn/cs-btn.vue'
import csLabel from '@/components/cs-label/cs-label.vue'
import { addSite } from '@/service/operate/site_manage/site_manage'

export default {
  components: {
    headerOption,
    csBtn,
    csLabel
  },
  data() {
    return {
      headerData: {
        siteName: '',
        siteNumber: '',
        delId: [],
        siteType: [
          {
            value: '0',
            label: '所有'
          },
          {
            value: '1',
            label: '快速动态检测站'
          },
          {
            value: '2',
            label: '固定点'
          },
          {
            value: '3',
            label: '收费站'
          }
        ],
        siteTypeValue: '',
        currentSelect: 0
      }
    }
  },
  created() {
    this.$bus.$on('siteSelectNum', (selectNum) => {
      this.currentSelect = selectNum
    })
    this.$bus.$on('siteSelectId', (selectId) => {
      this.delId = selectId
    })
  },
  watch: {
    'headerData.siteName'(newValue) {
      if (newValue === '') {
        this.$bus.$emit('siteSearchBtnClick', {
          siteName: this.headerData.siteName,
          siteNumber: this.headerData.siteNumber
        })
      }
    },
    'headerData.siteNumber'(newValue) {
      if (newValue === '') {
        this.$bus.$emit('siteSearchBtnClick', {
          siteName: this.headerData.siteName,
          siteNumber: this.headerData.siteNumber
        })
      }
    }
  },
  beforeDestroy() {
    this.$bus.$off('siteSearchBtnClick')
    // this.$bus.$off('exportlist')
    this.$bus.$off('addSiteDialogVisible')
    this.$bus.$off('deleteSiteDialogVisible')
  },
  methods: {
    exportlist() {
      this.$bus.$emit('site_exportlist', {
        siteName: this.headerData.siteName,
        siteNumber: this.headerData.siteNumber
      })
    },
    addSiteDialogVisible() {
      this.$bus.$emit('addSiteDialogVisible')
    },
    async addSite() {
      const { data } = await addSite()
      console.log(data)
    },
    deleteBtnClick() {
      if (this.currentSelect === 0) {
        this.$message({
          message: '请选择需要删除的站点',
          type: 'warning'
        })
      } else {
        this.$bus.$emit('deleteSiteDialogVisible', this.delId)
      }
    },
    searchBtnClick: _.throttle(function () {
      console.log(_)
      this.$bus.$emit('siteSearchBtnClick', {
        siteName: this.headerData.siteName,
        siteNumber: this.headerData.siteNumber
        // siteTypeValue: this.headerData.siteTypeValue ? this.headerData.siteTypeValue - 0 : ''
      })
    }, 1000)
  }
}
</script>

<style scoped>
/* 头部样式start */
.cs-input >>> .el-input__inner {
  width: 152px !important;
  height: 32px !important;
  border-radius: 0 !important;
}

.el-input >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框图标的行高 */
.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.cs_select >>> .el-input__inner {
  width: 152px;
  height: 32px;
  line-height: 32px;
  border-radius: 0;
}

/* 更改el-select下拉框图标的行高 */
.el-select >>> .el-input__icon {
  line-height: 32px;
}

/* 更改el-select下拉框的图标 */
.el-select >>> .el-icon-arrow-up:before {
  content: '\e78f';
}

.searcg_btn {
  margin-right: 30px;
}
/* 头部样式end */
</style>
